<template>
  <el-drawer v-model="visible" @close="handleCancel" class="app-settings-drawer" size="350" title="全局配置">
    <Column :options="contentOpts" title="内容区域" />
    <el-divider />
    <Column :options="othersOpts" title="其它设置" />
  </el-drawer>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { useAppStore } from '@/store'
import Column from './column.vue'

const appStore = useAppStore()
const visible: any = computed(() => appStore.globalSettings)
const contentOpts = [
  { name: '导航栏', key: 'navbar', defaultVal: true },
  { name: '菜单栏', key: 'menu', defaultVal: true },
]
const othersOpts = [{ name: '暗黑模式', key: 'colorWeek', defaultVal: false }]

const handleCancel = () => {
  appStore.updateSettings({ globalSettings: false })
}
</script>
<style lang="scss"></style>
